<template>
	<view class="mybox">
		<view class="mytop">
			<view class="bg">
				<!-- <image class="bgimg" src="../../static/logo.png" mode=""></image> -->
			</view>
			<view v-if="token==''" class="login" @click="show=true">点击登录</view>
			<view v-else class="user">
				<view class="user_info" @click="gotoyh">
					<image class="userpic" v-if="!userinfo.avatar" src="../../static/logo.png" mode=""></image>
					<image class="userpic" v-else :src="userinfo.avatar" mode=""></image>
					<view class="username">
						<view class="infoname">{{userinfo.nickname || '-'}}</view>
						<view class="vipphone">普通会员:{{userinfo.mobile}}</view>
					</view>
				</view>
				<view class="qiandao" @click="qinado">
					<text>签到</text>
				</view>
			</view>
			<view class="myphone">
				<view class="mypen">我的账号</view>
				<view class="balance">
					<view class="yvebox">
						<view class="yvtit">余额：{{userinfo.hasmoney}}</view>
						<view class="mingx" @click="gotoqianbo">消费明细<up-icon name="arrow-right" color="#c6c6c6"
								size="14"></up-icon></view>
					</view>
					<view class="yvebox1">
						<view class="yvtit">积分：{{userinfo.hasscore}}</view>
						<view class="mingx" @click="gotojifen">消费明细<up-icon name="arrow-right" color="#c6c6c6"
								size="14"></up-icon></view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>

		<view class="gengd">
			<view class="">
				<view class="cygn" @click="chenhide">
					常用功能<up-icon v-if="bol==false" name="arrow-right" color="#c6c6c6" size="14"></up-icon>
					<up-icon v-else name="arrow-down" color="#c6c6c6" size="14"></up-icon>
				</view>
				<view v-if="bol">
					<view class="listbox" v-for="(item,index) in list" :key="index" @click="gourl(item,index)">
						<block v-if="index == 0">
							<button open-type="contact">
								<view class="title">
									<image class="lisite" :src="item.pic" mode=""></image>
									<view class="titext">{{item.tit}}</view>
								</view>
								<up-icon name="arrow-right" color="#c6c6c6" size="14"></up-icon>
							</button>
						</block>
						<block v-else>
							<view class="title">
								<image class="lisite" :src="item.pic" mode=""></image>
								<view class="titext">{{item.tit}}</view>
							</view>
							<up-icon name="arrow-right" color="#c6c6c6" size="14"></up-icon>
						</block>
					</view>
				</view>
			</view>
			<view class="">
				<view class="cygn1" @click="chenhide1">
					赛事活动<up-icon v-if="bol==false" name="arrow-right" color="#c6c6c6" size="14"></up-icon>
					<up-icon v-else name="arrow-down" color="#c6c6c6" size="14"></up-icon>
				</view>
				<view v-if="bol1">
					<view class="listbox" v-for="(item,index) in list1" :key="index" @click="gotourl(item, index)">
						<view class="title">
							<image class="lisite" :src="item.pic" mode=""></image>
							<view class="titext">{{item.tit}}</view>
						</view>
						<up-icon name="arrow-right" color="#c6c6c6" size="14"></up-icon>
					</view>
				</view>
			</view>

		</view>
		<up-popup :show="show" @close="close" round="20rpx">
			<view class="shouq">
				<view class="potit">用户隐私保护提示</view>
				<view class="popte">在你使用qp运动服务之前，请仔细阅读<br /><text style="color: #5782c1;"
						@click="ysbh">《辰源小程序隐私保护指引》</text><br />如你同意该指引，请点击“同意”开始使用本小程序</view>
				<view class="pobox">
					<view class="onlogin" @click="chengeno">拒绝</view>
					<view class="yeslogin" @click="chengeyes">同意</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="show1" @close="close1" overlayOpacity="0" mode="center" round="40rpx">
			<view class="jingao">
				<view class="msgtit">警告</view>
				<view class="msgte">您点击了拒绝授权，将无法正常使用小程序，请授权之后再进入!!</view>
				<view class="msgbox" @click="close1">返回授权</view>
			</view>
		</up-popup>
		<up-popup :show="show2" @close="close2" mode="center" safeAreaInsetBottom="false">
			<view class="qdbox">
				<view class="qdtit">{{qitit}}</view>
				<view class="qdli">
					<view v-for="(item,index) in qiandao" :key="index">
						<view class="qitext" :class="{'yqite':item.is_sign==1}">
							{{item.date}}
						</view>

					</view>
				</view>
				<view v-if="!issign" class="qdbutton" @click="chanqian">今日签到</view>
				<view v-else class="qdbutton1">今日已签到</view>
				<view class="bcak"></view>
				<view class="qx">
					<up-icon name="close-circle" color="#fff" size="50px" round="35rpx" @click="show2=false"></up-icon>
				</view>
			</view>
		</up-popup>
		<view style="height:140rpx;"></view>
	</view>
	<cc-myTabbar :tabBarShow="4"></cc-myTabbar>
</template>

<script setup>
	import {
		onReady,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted
	} from 'vue';
	import request from '../../utils/request';
	let cliqd = ref(true)
	let token = ref('')
	let bol = ref(false)
	let bol1 = ref(false)
	let show = ref(false)
	let show1 = ref(false)
	let show2 = ref(false)
	let opid = ref('')
	let userinfo = ref()
	let phone = ref('')
	let captcha = ref('')
	let issign = ref(0)
	let qiandao = ref([])
	let qitit = ref('签到')
	let list = ref([{
			pic: '/static/iamges/容器.png',
			tit: '在线客服'
		},
		{
			pic: '/static/iamges/容器(2).png',
			tit: '反馈与建议',
			url: '/pages/advise/advise'
		},
		{
			pic: '/static/iamges/容器(1).png',
			tit: '条款与协议',
			url: '/pages/provision/provision'
		},
		{
			pic: '/static/iamges/容器(3).png',
			tit: '充值中心',
			url: '/pages/redeem/redeem'
		}
		// {
		// 	pic: '/static/iamges/容器(3).png',
		// 	tit: '兑换散客票',
		// 	url: '/pages/redeem/redeem'
		// }
	])
	let list1 = ref([{
			pic: '/static/iamges/容器(4).png',
			tit: '荣誉头衔',
			url: '/pages/myhonor/myhonor'
		},
		{
			pic: '/static/iamges/容器(5).png',
			tit: '赛事参与',
			url: '/pages/match/match'
		},
		{
			pic: '/static/iamges/容器 18.png',
			tit: '比赛记录',
			url: '/pages/bsrecord/bsrecord'
		}
	])
	onShow(() => {
		userinfo.value = uni.getStorageSync('userinfo')
		phone.value = uni.getStorageSync('phone')
		token.value = uni.getStorageSync('token')
		if (!uni.getStorageSync('opid')) {
			open()
		} else {
			getUserInfo()
		}
		if (token.value) {
			request.post('user/index', {
				header: {
					"token": token.value
				}
			}).then(res => {
				uni.setStorageSync("userinfo", res.data)
				userinfo.value = res.data
			}).catch(err => {
				console.log(err);
			})
		}

	})
	const open = () => {
		uni.login({
			provider: 'weixin',
			success: (res) => {
				console.log(res, 'res')
				const code = res.code
				request.get('Index/getOpenId', {
					data: {
						code: code
					}
				}).then(res => {
					opid.value = res.data
					uni.setStorageSync("opid", res.data)
				}).catch(err => {
					console.log(err);
				})
			},
			fail: err => {
				console.log(err)
			}
		})
	}

	const chenhide = () => {
		bol.value = !bol.value
	}
	const chenhide1 = () => {
		bol1.value = !bol1.value
	}
	const gotourl = (item) => {
		uni.navigateTo({
			url: item.url
		})
	}
	const gotoqianbo = () => {
		uni.navigateTo({
			url: '/pages/balance/balance'
		})
	}
	const gotojifen = () => {
		uni.navigateTo({
			url: '/pages/lablepoints/lablepoints'
		})
	}
	const gourl = (item, index) => {
		if (index == 0) {
			return
		}
		uni.navigateTo({
			url: item.url
		})
	}
	const close = () => {
		show.value = false
	}
	const close1 = () => {
		show1.value = false
	}
	const close2 = () => {
		show2.value = false
	}
	const chengeno = () => {
		show.value = false
		show1.value = true
	}
	const getUserInfo = () => {
		request.post('user/index', {
			header: {
				"token": token.value
			}
		}).then(res => {
			console.log(res);
			uni.setStorageSync("userinfo", res.data)
			userinfo.value = res.data
			console.log(userinfo.value);
		}).catch(err => {
			console.log(err);
		})
	}
	const chengeyes = () => {
		show.value = false
		uni.navigateTo({
			url: '/pages/myphone/myphone'
		})
		return
		request.post('User/wechatlogin', {
			data: {
				open_id: opid.value,
				mobile: phone.value,
				nickname: '',
				avatar: '',
				invate_code: '',
				captcha: captcha.value
			},
			header: {
				'content-type': 'application/json'
			}
		}).then(res => {
			console.log(res);
			if (res.code == -1) {
				uni.navigateTo({
					url: '/pages/myphone/myphone'
				})
			} else {
				token.value = res.data.userinfo.token
				uni.setStorageSync('token', res.data.userinfo.token)
				request.post('user/index', {
					header: {
						"token": token.value
					}
				}).then(res => {
					console.log(res);
					uni.setStorageSync("userinfo", res.data)
					userinfo.value = res.data
					console.log(userinfo.value);
				}).catch(err => {
					console.log(err);
				})
			}

		}).catch(err => {
			console.log(err);
		})
	}

	const gotoyh = () => {
		uni.navigateTo({
			url: '/pages/yonghu/yonghu'
		})
	}
	const qinado = () => {
		show2.value = true
		qian()
	}
	const qian = () => {
		request.post('Usersign/isSign', {
			header: {
				"token": token.value
			}
		}).then(res => {
			// console.log(res.data);
			issign.value = res.data
		}).catch(err => {
			console.log(err);
		})
		request.post('Usersign/index', {
			header: {
				"token": token.value
			}
		}).then(res => {
			console.log(res.data);
			qiandao.value = res.data
		}).catch(err => {
			console.log(err);
		})
	}
	const chanqian = () => {

		request.post("Usersign/signing", {
			header: {
				"token": token.value,
				"Content-Type": "multipart/form-data"
			}
		}).then(res => {
			// cliqd.value = false
			qian()
		}).catch(err => {
			console.log(err);
		})
	}
	const ysbh = () => {
		uni.navigateTo({
			url: '/pages/privacy/privacy'
		})
	}
	onReady(() => {
		uni.hideTabBar();
	})
</script>

<style scoped lang="scss">
	page {
		padding-bottom: 140rpx;

	}

	.bg {
		position: absolute;
		width: 100%;
		height: 400rpx;
		top: 0;
		left: 0;
		background-color: #07c160;

		// image {
		// 	width: 100%;
		// 	height: 100%;
		// }
	}

	.mybox {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
	}

	.mytop {
		position: relative;
		width: 100%;
		height: 400rpx;
		background-image: url('/static/logo.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		padding: 180rpx 24rpx 0;
		box-sizing: border-box;
	}

	.login {
		width: 500rpx;
		height: 90rpx;
		background-color: #10c696;
		border: 2px solid #fff;
		margin: 0 auto;
		margin-bottom: 50rpx;
		border-radius: 50rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		font-weight: 700;
		font-size: 24px;
		position: relative;
		z-index: 10;
	}

	.user {
		display: flex;
		align-items: center;
		position: relative;
		z-index: 10;
		
		.user_info {
			flex: 1;
			display: flex;
			align-items: center;
		}
	}

	.userpic {
		width: 140rpx;
		height: 136rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.username {
		color: #fff;
	}

	.vipphone {
		font-size: 13px;
		margin-top: 26rpx;
	}

	.qiandao {
		font-size: 30rpx;
		color: #fff;
	}

	.myphone {
		width: 712rpx;
		height: 244rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: absolute;
		top: 330rpx;
		left: 20rpx;

	}

	.balance {
		display: flex;
		align-items: center;
	}

	.yvebox {
		width: 350rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-right: 1px solid #ebebeb;
	}

	.yvebox1 {
		width: 350rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mypen {
		margin-top: 44rpx;
		margin-bottom: 24rpx;
		padding-left: 18rpx;
		margin-left: 3rpx;
		border-left: 4rpx solid #10c696;
		box-sizing: border-box;
	}

	.yvtit {
		font-size: 18px;
	}

	.mingx {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		font-size: 13px;
	}



	.gengd {
		width: 712rpx;
		box-sizing: border-box;
		margin: 0 auto;
		background-color: #fff;
		padding-top: 44rpx;
		padding-bottom: 30rpx;
	}

	.cygn {
		width: 712rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		border-left: 3px #10c696 solid;
	}

	.cygn1 {
		width: 712rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		margin-top: 64rpx;

		padding-left: 20rpx;
		border-left: 3px #10c696 solid;
	}

	.listbox {
		width: 625rpx;
		height: 110rpx;
		display: flex;
		margin: 0 auto;

		justify-content: space-between;
		border-bottom: 1px solid #ebebeb;
		box-sizing: border-box;

		button {
			width: 100%;
			height: 100%;
			padding: 0 !important;
			margin: 0 !important;
			background-color: transparent;
			display: flex;
			margin: 0 auto;

			justify-content: space-between;

			&::after {
				border: 0 !important;
			}
		}
	}

	.lisite {
		width: 45rpx;
		height: 45rpx;
		margin-right: 20rpx;
	}

	.title {
		display: flex;
		align-items: center;
	}

	.titext {
		font-size: 14px;
	}

	.shouq {
		width: 100%;
		height: 704rpx;
		padding: 0 60rpx;
		padding-top: 50rpx;
		box-sizing: border-box;
	}

	.potit {
		height: 120rpx;
		line-height: 120rpx;
		font-size: 18px;
	}

	.popte {
		color: #5a5a5a;
	}

	.pobox {
		margin-top: 200rpx;
		display: flex;
		justify-content: space-evenly;
	}

	.onlogin {
		width: 200rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 15rpx;
		text-align: center;
		background-color: #f2f2f2;
	}

	.yeslogin {
		width: 200rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 15rpx;
		text-align: center;
		background-color: #10c696;
		color: #fff;
	}

	.jingao {
		width: 100%;
		height: 640rpx;
		box-sizing: border-box;
		padding: 0 100rpx;
		padding-top: 30rpx;
		font-size: 20px;
	}

	.msgtit {
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
	}

	.msgte {
		text-align: center;
		color: #5a5a5a;
	}

	.msgbox {
		width: 460rpx;
		height: 120rpx;
		background-color: #07c160;
		color: #fff;
		line-height: 120rpx;
		border-radius: 15rpx;
		margin: 0 auto;
		margin-top: 90rpx;
		text-align: center;
	}

	.qdbox {
		width: 560rpx;
		height: 690rpx;
		position: relative;
	}

	.bcak {
		width: 560rpx;
		height: 200rpx;
		position: absolute;
		top: -200rpx;
	}

	.qx {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 120%;
		left: 230rpx;
	}

	.qdtit {
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		font-size: 22px;
		font-weight: 700;
	}

	.qdli {
		display: flex;
		flex-wrap: wrap;
	}

	.qitext {
		width: 120rpx;
		height: 140rpx;
		background-color: #eee;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.yqite {
		background-color: #10c696;
	}

	.qdbutton {
		width: 400rpx;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #10c696;
		color: #fff;
		text-align: center;
		border-radius: 50rpx;
		margin: 0 auto;
		margin-top: 70rpx;

	}

	.qdbutton1 {
		width: 400rpx;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #bbbbbb;
		color: #fff;
		text-align: center;
		border-radius: 50rpx;
		margin: 0 auto;
		margin-top: 70rpx;

	}
</style>